<template>
  <h1 class="title">欢迎来到中国科学技术大学</h1>
  <nav>
    <!-- <a href="#">首页</a>
    <a href="#">新闻</a>
    <a href="#">关于</a> -->
    <RouterLink replace :to="{ name: 'firstPage' }" active-class="active"
      >首页</RouterLink
    >
    <RouterLink replace :to="{ path: '/news' }" active-class="active"
      >新闻</RouterLink
    >
    <RouterLink to="/about" active-class="active">关于</RouterLink>
  </nav>
  <div class="content">
    <RouterView />
  </div>
</template>

<script setup lang="ts">
import { RouterView } from "vue-router";
</script>

<style scoped>
.title {
  background-color: #bbb;
  padding: 10px;
  border-radius: 10px;
  text-align: center;
}
.active {
  background-color: orange;
}
nav {
  display: flex;
  justify-content: space-around;
}
nav > a {
  padding: 8px;
  text-decoration: none;
  background-color: #ccc;
  width: 80px;
  text-align: center;
  border-radius: 8px;
  font-weight: bold;
  color: white;
  font-size: 1.5em;
}
.content {
  height: 500px;
  margin-top: 20px;
  background-color: beige;
}
</style>
